import { createApp} from 'vue'
import App from './App.vue'
/**
 * 自定义全局指令
 *      一般用于需要直接操作DOM的情况
 * 
 * app.directive('指令名',{
 *      // 指令钩子函数
 *      mounted(el, binding, vnode, prevVnode) {},
 *      updated(el, binding, vnode, prevVnode) {},
 *      .......
 * })
 * 注意：指令名不要加v-
 */
const app = createApp(App);

/* app.directive('focus',{
    mounted(el,binding) { 
        console.log(el,binding);
        el.focus() // 自动获取焦点
    }

}) */

/****************************************************************************************** */

/**
 * 自定义全局指令简写形式
 *     一个很常见的情况是仅仅需要在 `mounted` 和 `updated` 上实现相同的行为，除此之外并不需要其他钩子
 * app.directive('指令名',(el,binding)=>{
    // 逻辑会在 mounted 和 updated 时都会被调用
})
 */
app.directive('auth',(el,binding)=>{
    // 逻辑会在 mounted 和 updated 时都会被调用
    if (binding.value != "user:add") {
        el.parentNode.removeChild(el) // 移除el（隐藏按钮）
        console.log("权限不足"); // 大概意思
    }
})

app.mount('#app'); // 自定义指令挂载操作要放到最后

